---
slug: ../Icon
---

import Basic from "../../_samples/main/Icon/Basic/Basic.md";
import TntIcons from "../../_samples/main/Icon/TntIcons/TNTIcons.md";
import BSIcons from "../../_samples/main/Icon/BSIcons/BSIcons.md";
import Interactive from "../../_samples/main/Icon/Interactive/Interactive.md";
import CustomStyling from "../../_samples/main/Icon/CustomStyling/CustomStyling.md";
import Design from "../../_samples/main/Icon/Design/Design.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples


### Design
The Icon supports multiple designs.

<Design />

### Custom Styling
The Icon allows style customization via pure CSS, applied on the tag.

<CustomStyling />

### Interactive
The Icon can be interactive - clickable and focusable.

<Interactive />

### SAP Fiori Tools Icons
The SAP Fiori Tools Icons are available in the <b>@ui5/webcomponents-icons-tnt</b> package.

<TntIcons />

### SAP Business Suite Icons
The SAP Business Suite Icons are available in the <b>@ui5/webcomponents-icons-business-suite</b> package.

<BSIcons />





